<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Graph with Tooltip Example</title>
    <script src="/static/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 600px;"></div>

    <script>
        // 假设有一个包含节点信息的数组
        var nodes = [
            { id: 0, name: 'Alice', age: 20, gender: 'Female', phone: '1234567890' },
            { id: 1, name: 'Bob', age: 25, gender: 'Male', phone: '9876543210' },
            { id: 2, name: 'Charlie', age: 30, gender: 'Male', phone: '5555555555' }
        ];

        // 假设有一个包含节点间关系的数组
        var edges = [
            { source: 0, target: 1 },
            { source: 0, target: 2 }
        ];

        // 初始化 Echarts 实例
        var chart = echarts.init(document.getElementById('chart'));

        // 定义节点的提示框
        var tooltip = {
            formatter: function(params) {
                var node = nodes[params.dataIndex];
                var content = 'Name: ' + node.name + '<br>';
                content += 'Age: ' + node.age + '<br>';
                content += 'Gender: ' + node.gender + '<br>';
                content += 'Phone: ' + node.phone + '<br>';
                return content;
            }
        };

        // 定义图表的配置项
        var option = {
            series: [{
                type: 'graph',
                layout: 'force',
                data: nodes,
                edges: edges,
                emphasis: {
                    focus: 'adjacency',
                    lineStyle: {
                        width: 3,
                        color: '#FF0000'
                    }
                },
                tooltip: tooltip
            }]
        };

        // 使用配置项绘制图表
        chart.setOption(option);
    </script>
</body>
</html>